<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="style/css/bootstrap.min.css">
  <link rel="stylesheet" href="style/css/common.css">
  <style>
    .tips{padding: 0 10px;}
    .tips a{margin-left: 4px; color: red;}
    .tab-index-main>div{border-radius: 4px; background: #f5f5f5; border: 1px solid #d0d0d0; padding: 10px;}
  </style>
</head>
<body>
  <div class="container">
    <div class="tips">
      <h3>FaceApi</h3>
      <p>该demo示例完成了前端的两种请求方式实现数据交互：</p>
      <p>1、通过基于RESTful HTTP请求封装的ajax(jQuery)实现数据交互<a href="jQuery/index.html" target="_blank">点击此处，预览demo</a></p>
      <p>2、通过Apache Thrift Javascript client(jQuery)实现数据交互<a href="client/index.html" target="_blank">点击此处，预览demo</a></p>
    </div>
    <div class="panel panel-primary mt20">
      <div class="panel-heading">demo中前、后端主要用到的方法调用示例：</div>
      <div class="panel-body">
        <ul id="myTab" class="nav nav-tabs">
          <li class="active"><a href="#jQuery" data-toggle="tab">ajax调用</a></li>
          <li><a href="#client" data-toggle="tab">client调用</a></li>
          <li><a href="#Java" data-toggle="tab">Java调用</a></li>
          <li><a href="#C" data-toggle="tab">C++调用(C++11)</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
          <div class="tab-pane fade in active" id="jQuery">
            <pre>
              <code>
// 提交照片进行人脸检测
$('.submit').click(function () {
  $.ajax({
    type: "post",
    url: http://127.0.0.1:26423 + '/FaceApi/detectFace',
    //解决跨域请求问题
    xhrFields: {
      withCredentials: true
    },
    crossDomain: true,
    contentType: "application/json",
    //参数格式
    data: JSON.stringify({
      imgData: imgCommon
    }),
    //请求成功返回的数据
    success: function (data) {
      console.log(data)
    }, 
    //请求失败返回的数据
    error: function (error) { 
      console.log(error)
    } 
  })
})
          </code>
        </pre>
      </div>
      <div class="tab-pane fade" id="client">
        <pre>
          <code>
// 提交照片进行人脸检测
var transport = new Thrift.Transport("http://127.0.0.1:26422");
var protocol = new Thrift.Protocol(transport);
var client = new FaceApiClient(protocol);
$('.submit').click(function () {
  client.detectFace(imgBlob, function (data) {
    console.log(data)
  }).fail(function (jqXHR, status, error) {
    console.log(jqXHR)
  })
})
          </code>
        </pre>
      </div>
  <div class="tab-pane fade" id="Java">
    <pre>
      <code>
try{
  // 创建faceapi rpc client
  FaceApiThriftClient client = new FaceApiThriftClient("127.0.0.1",26421);
  // 读取图像文件为二进制字节数组
  // byte[] imgData = ...
  // 调用检测方法
  CodeInfo[] codes = client.detectFace(imgData);
  // 输出检测到的人脸位置信息
  for(CodeInfo c:codes){
    logger.info("FRECT={}",c.getPos());
  }
}catch (IOException e) {
  e.printStackTrace();
} catch(ImageErrorException e){
  // 捕获服务端抛出的图像数据异常
  e.printStackTrace();
}catch(ServiceRuntimeException e){
  // 捕获服务端抛出的运行时异常(RuntimeException)
  e.printServiceStackTrace();
}catch(RuntimeException e){
  e.printStackTrace();
}
        </code>
      </pre>
    </div>
    <div class="tab-pane fade" id="C">
      <pre>
        <code>
auto client = FaceApiIfClient("127.0.0.1", 26421);
try{
  // 加载图像数据为std::string
  // std::string imgData = ....
  // 调用检测方法
  auto codes = client.detectFace(imgData);
  for (auto code : *codes) {
      std::cout << *code.__get_pos() << std::endl;
  }
}
catch (net::gdface::image::ImageErrorException &e) 
{
  // 捕获服务端抛出的图像数据异常
  std::cout << e.serviceStackTraceMessage << std::endl;
}
catch (net::gdface::thrift::exception::ServiceRuntimeException &e)
{
  // 捕获服务端抛出的运行时异常(RuntimeException)
  std::cout << e.serviceStackTraceMessage << std::endl;
}
catch (std::exception& e) {
  std::cout << e.what()<< std::endl;
}
              </code>
            </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="style/js/jquery.min.js"></script>
  <script src="style/js/bootstrap.min.js"></script>
  <script>
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
      alert('请勿使用ie浏览器访问该demo，推荐使用谷歌浏览器或者360浏览器极速模式')
    }
  </script>
</body>